<template>
  <cs-card v-loading="isLoading">
    <div>
      <div class="formTitle_G">
        <span>修改新闻</span>
        <div>
          <cs-btn btnText="取消" type="search" @click.native="cancelBtnClick" />
          <cs-btn
            btnText="保存"
            type="primary"
            @click.native="saveNewsAlterBtnClick('releaseNewsForm')"
          />
        </div>
      </div>
      <div class="formContent_G">
        <!-- 70px    3.64583vw-->
        <el-form
          label-width="80px"
          :model="formData"
          :rules="formRules"
          ref="releaseNewsForm"
          class="form_G"
        >
          <el-form-item
            label="上传封面"
            class="formUploadCover_G"
            prop="coverUrl"
          >
            <el-upload
              class="avatar-uploader_G"
              :action="uploadURL"
              :headers="headerObj"
              list-type="picture-card"
              :limit="1"
              :file-list="uploadImgList"
              :on-progress="handleImgUploadProgress"
              :on-success="handleImgSuccess"
              :on-error="handleImgError"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleUploadImgRemove"
              :class="formData.coverUrl ? 'uploadImg' : ''"
            >
              <i class="el-icon-plus"></i>
              <span class="addPhoto_G" v-show="isShowUploadTip">添加照片</span>
            </el-upload>
            <el-dialog :visible.sync="uploadImgDialogVisible" title="图片预览">
              <img width="100%" :src="uploadImgDialogImageUrl" alt="" />
            </el-dialog>
            <div class="uploadCoverTipBox_G">
              <div class="uploadCoverTip_G">
                <span>*</span>
                <span>建议banner图封面尺寸750*300px</span>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="新闻标题" prop="firstTitle">
            <el-input v-model.trim="formData.firstTitle"></el-input>
          </el-form-item>
          <el-form-item label="新闻副标" prop="lastTitle">
            <el-input v-model.trim="formData.lastTitle"></el-input>
          </el-form-item>
          <el-form-item
            label="新闻类型"
            prop="categoryIds"
            :class="newsTypeLabelData.length === 0 ? '' : 'formItemBottom_6_G'"
          >
            <cs-tag
              type="plainPrimary"
              v-for="item in newsTypeLabelData"
              :key="item.id"
              class="newsTypeTag_G"
              @closeTagEvent="closeNewsTypeFormTagEvent(item.id)"
              >{{ item.label }}</cs-tag
            >
            <cs-btn
              btnText="添加新闻类型"
              type="primary"
              @click.native="addNewsTypeBtnClick"
            />
          </el-form-item>
          <el-form-item
            label="投放小区"
            prop="communityIds"
            :class="
              residentialAreaLabelData.length === 0 ? '' : 'formItemBottom_6_G'
            "
          >
            <cs-tag
              type="plainPrimary"
              v-for="item in residentialAreaLabelData"
              :key="item.id"
              class="communityTag_G"
              @closeTagEvent="closeResidentialFormTagEvent(item.id)"
              >{{ item.label }}</cs-tag
            >
            <cs-tag
              type="plainPrimary"
              :isClose="false"
              v-show="isSelectAllCommunity"
              class="communityTag_G"
              >已选取现有全部小区
            </cs-tag>
            <cs-btn
              btnText="添加投放小区"
              type="primary"
              @click.native="isShowResidentialAreaDialog = true"
            />
          </el-form-item>
          <el-form-item label="新闻顺序" prop="sort">
            <el-input-number
              v-model="formData.sort"
              :min="1"
              :max="99999"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="是否轮播" prop="isBanner">
            <el-checkbox
              v-model="formData.isBanner"
              :true-label="1"
              :false-label="0"
              >是否轮播</el-checkbox
            >
          </el-form-item>
          <el-form-item label="新闻内容" prop="content">
            <div id="richTextEditorBox"></div>
          </el-form-item>
        </el-form>
      </div>

      <!-- 新闻类型 -->
      <el-dialog
        title="新闻类型"
        :visible.sync="isShowNewsTypeDialog"
        width="681px"
        class="dialogTitle_G"
        @open="newsTypeDialogOpen"
        @close="newsTypeDialogClose"
      >
        <el-dialog
          width="30%"
          title="添加新闻类型"
          :visible.sync="newsTypeDialogInnerVisible"
          append-to-body
          :close-on-click-modal="false"
          @close="newsTypeInnerDialogClose"
        >
          <el-form
            :model="innerDialogForm"
            :rules="rules"
            :validate-on-rule-change="false"
            ref="innerDialog"
          >
            <el-form-item label="新闻类型" prop="newsType">
              <el-input
                placeholder="请输入新闻类型"
                v-model="innerDialogForm.newsType"
              ></el-input>
            </el-form-item>
          </el-form>

          <div class="dialog-footer_G">
            <cs-btn
              type="primary"
              @click.native="addNewsTypeConfirmBtnClick('innerDialog')"
              btnText="确定"
              :buttonStatus="addNewsTypeBtnStatus"
              class="confirmBtn"
            />
            <cs-btn
              @click.native="newsTypeDialogInnerVisible = false"
              btnText="取消"
            />
          </div>
        </el-dialog>
        <div>
          <cs-tag
            type="plainPrimary"
            v-for="item in newsTypeData"
            :key="item.id"
            :isClick="true"
            :id="item.id"
            :clickIds="tempNewsTypeIdArray"
            @closeTagEvent="closeNewsTypeDialogTagEvent(item.id)"
            @csTagClick="newsTypeDialogCsTagClick(item.id, item.label)"
            class="newsTypeCsTag"
            >{{ item.label }}</cs-tag
          >
          <cs-btn
            btnText="添加新闻类型"
            type="primary"
            @click.native="newsTypeDialogInnerVisible = true"
          />
        </div>
        <div class="dialog-footer_G">
          <cs-btn
            type="primary"
            @click.native="selectNewsTypeBtnClick"
            btnText="确定"
            :buttonStatus="confirmSelectBtnStatus"
            class="confirmBtn"
          />
          <cs-btn @click.native="isShowNewsTypeDialog = false" btnText="取消" />
        </div>
      </el-dialog>

      <!-- 投放小区 -->
      <el-dialog
        title="投放小区"
        :visible.sync="isShowResidentialAreaDialog"
        width="681px"
        class="dialogTitle_G"
        @open="residentialAreaDialogOpen"
        @close="residentialAreaDialogClose"
      >
        <!-- <div>
          <cs-tag
            type="plainPrimary"
            v-for="item in residentialAreaList.list"
            :key="item.communityId"
            :isClick="true"
            :id="item.communityId"
            :clickIds="tempResidentialAreaIdArray"
            @closeTagEvent="
              closeResidentialAreaDialogTagEvent(item.communityId)
            "
            @csTagClick="
              residentialAreaDialogCsTagClick(item.communityId, item.name)
            "
            class="newsTypeCsTag"
            >{{ item.name }}</cs-tag
          >
          <cs-btn
            btnText="添加投放小区"
            type="primary"
            @click.native="addResidentialAreaDialogVisible"
          />
        </div>
        <div class="pagination_right_G pagination_right_dialog_G">
          <span class="currentSelect_G currentSelect_dialog_G">{{
            `共${residentialAreaList.totalCount}项`
          }}</span>
          <cs-pagination
            :currentPage="residentialAreaList.currPage"
            :totalPage="residentialAreaList.totalPage"
            @firstPageClick="firstPageClick"
            @previousPageClick="previousPageClick"
            @nextPageClick="nextPageClick"
            @lastPageClick="lastPageClick"
            @junkToOtherPage="junkToOtherPage"
          />
        </div> -->
        <!-- <el-transfer
          v-model="tempResidentialAreaData"
          :data="residentialAreaData"
        >
          <el-button
            class="transfer-footer"
            slot="left-footer"
            size="small"
            @click="loadMoreResidentialArea"
            :loading="loadMoreBtnStatus"
          >
            加载更多</el-button
          ></el-transfer
        > -->
        <el-transfer
          :data="residentialAreaData"
          @left-check-change="leftCheckChange"
          ref="transfer"
        >
          <el-button
            class="transfer-footer"
            slot="left-footer"
            size="small"
            @click="loadMoreResidentialArea"
            :loading="loadMoreBtnStatus"
            >加载更多</el-button
          >
          <el-button
            class="transfer-footer"
            slot="left-footer"
            size="small"
            :type="formData.selectAllCommunity ? 'primary' : ''"
            @click="selectAllResidentialArea"
            >选取现有全部小区</el-button
          >
        </el-transfer>
        <div class="dialog-footer_G">
          <cs-btn
            type="primary"
            @click.native="selectResidentialAreaBtnClick"
            btnText="确定"
            :buttonStatus="selectCommunityBtnStatus"
            class="confirmBtn"
          />
          <cs-btn
            @click.native="isShowResidentialAreaDialog = false"
            btnText="取消"
          />
        </div>
      </el-dialog>
    </div>
  </cs-card>
</template>

<script>
import CsCard from "@/components/CsCard/CsCard.vue";
import CsBtn from "@/components/CsBtn/CsBtn.vue";
import CsTag from "@/components/CsTag/CsTag.vue";
import CsPagination from "@/components/CsPagination/CsPagination.vue";
import { getToken } from "@/utils/auth";

import E from "wangeditor";
import { throttle } from "lodash";

import { mapState } from "vuex";

import { createNewsType, deleteNewsType, alterNews } from "@/api/news";
import { queryNewsDetailById } from "@/api/news";

export default {
  name: "releaseNews",
  components: {
    CsCard,
    CsBtn,
    CsTag,
    CsPagination,
  },
  data() {
    const checkImgUrl = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        return callback(new Error("请上传封面"));
      } else {
        callback();
      }
    };
    const checkNewsContent = (rule, value, callback) => {
      console.log(value);
      if (!value) {
        return callback(new Error("请输入新闻内容"));
      } else {
        callback();
      }
    };
    // 选取投放小区自定义校验规则
    const checkCommunity = (rule, value, callback) => {
      if (value.length !== 0) {
        callback();
      } else if (this.isSelectAllCommunity) {
        callback();
      } else if (value.length === 0) {
        return callback(new Error("请选择小区"));
      }
    };
    return {
      formData: {
        id: "",
        firstTitle: "", // 新闻标题
        lastTitle: "", // 新闻副标
        coverUrl: "", // 上传封面链接
        categoryIds: [], // 新闻类型ID数组
        communityIds: [], // 投放小区ID
        sort: 0,
        isBanner: 0,
        content: "", // 新闻内容
        selectAllCommunity: false,
      },
      isLoading: false,
      imageUrl: "",
      editor: "", // 编辑器
      isShowUploadTip: true, // el-upload添加照片提示显示状态
      uploadImgList: [], // el-upload上传图片列表
      uploadImgDialogVisible: false, // el-upload上传图片预览对话框
      uploadImgDialogImageUrl: "", // el-upload上传图片预览对话框图片URL
      // 上传地址
      uploadURL: process.env.VUE_APP_BASE_API + "/sys/fileManager/upload",
      // 图片上传组件的headers请求头对象
      headerObj: {
        Authorization: getToken(),
      },
      newsTypeLabelData: [], // 新闻类型标签数据
      residentialAreaLabelData: [], // 投放小区标签数据
      // 新闻类型对话框 start
      isShowNewsTypeDialog: false, // 是否显示新闻类型对话框
      addNewsTypeBtnStatus: false, // 添加新闻类型内对话框按钮状态
      confirmSelectBtnStatus: false, // 确认选择新闻类型按钮状态
      selectCommunityBtnStatus: false, // 确认选择小区按钮状态
      newsTypeDialogInnerVisible: false, // 新闻类型对话框内部对话框显示状态
      tempNewsTypeIdArray: [], // 临时新闻类型ID数组
      tempNewsTypeLabelData: [], // 临时新闻类型标签数据
      innerDialogForm: {
        newsType: "", // 新闻类型对话框内部对话框新闻类型输入框数据
      },
      rules: {
        newsType: [
          { required: true, message: "请输入新闻类型", trigger: "blur" },
        ],
      },
      formRules: {
        firstTitle: [
          { required: true, message: "请输入新闻标题", trigger: "blur" },
        ],
        lastTitle: [
          { required: true, message: "请输入新闻副标", trigger: "blur" },
        ],
        coverUrl: [
          {
            required: true,
            trigger: "blur",
            validator: checkImgUrl,
          },
        ],
        categoryIds: [
          { required: true, message: "请选择新闻类型", trigger: "blur" },
        ],
        communityIds: [
          { required: true, validator: checkCommunity, trigger: "change" },
        ],
        sort: [{ required: true, message: "请选择新闻顺序", trigger: "blur" }],
        content: [
          {
            required: true,
            message: "请输入新闻内容",
            trigger: "blur",
            validator: checkNewsContent,
          },
        ],
      },
      // 新闻类型对话框 end

      // 投放小区对话框 start
      isShowResidentialAreaDialog: false, // 是否显示投放小区对话框
      // tempResidentialAreaIdArray: [], // 临时投放小区ID数组数据
      // tempResidentialAreaLabelData: [], // 临时投放小区标签数据
      loadMoreBtnStatus: false,
      isSelectAllCommunity: false,
      tempResidentialAreaData: [],
      residentialAreaData: [],
      offset: 1,
      limit: 10,
      // 投放小区对话框 end
    };
  },
  created() {
    this.queryNewsDetailById();
    this.getResidentialData();
    this.$store.dispatch("news/getAllNewsType");
  },
  mounted() {
    this.createWebRichTextEditor();
  },
  computed: {
    ...mapState("residentialArea", ["residentialAreaList"]),
    ...mapState("news", ["newsTypeData"]),
  },
  methods: {
    // 通过ID查询新闻查询
    async queryNewsDetailById() {
      this.isLoading = true;
      const data = await queryNewsDetailById({ newsId: this.$route.query.id });
      console.log(data);
      const listData = data.data;
      this.formData = {
        id: listData.id,
        firstTitle: listData.firstTitle, // 新闻标题
        lastTitle: listData.lastTitle, // 新闻副标
        coverUrl: listData.coverUrl, // 上传封面链接
        categoryIds: listData.categories, // 新闻类型ID数组
        communityIds: listData.communities, // 投放小区ID
        sort: listData.sort,
        isBanner: listData.isBanner,
        content: listData.content, // 新闻内容
        selectAllCommunity: false,
      };
      console.log(this.formData);
      this.uploadImgList.push({
        name: this.formData.coverUrl.split("/")[
          this.formData.coverUrl.split("/").length - 1
        ],
        url: this.formData.coverUrl,
      });
      // 拼接新闻类型标签临时数据
      this.formData.categoryIds.forEach((item) => {
        this.tempNewsTypeIdArray.push(item.id);
        this.tempNewsTypeLabelData.push({ id: item.id, label: item.label });
      });
      this.formData.categoryIds = this.tempNewsTypeIdArray;
      this.newsTypeLabelData = this.tempNewsTypeLabelData;

      // 拼接投放小区标签临时数据
      // this.formData.communityIds.forEach((item) => {
      //   this.tempResidentialAreaIdArray.push(item.communityId);
      //   this.tempResidentialAreaLabelData.push({
      //     id: item.communityId,
      //     label: item.name,
      //   });
      // });
      // this.formData.communityIds = this.tempResidentialAreaIdArray;
      // this.residentialAreaLabelData = this.tempResidentialAreaLabelData;
      this.formData.communityIds.forEach((item) => {
        this.residentialAreaLabelData.push({
          id: item.communityId,
          label: item.name,
        });
      });

      this.editor.txt.html(this.formData.content);
      this.isLoading = false;
    },
    // 上传图片中事件
    handleImgUploadProgress(event, file, fileList) {
      this.isShowUploadTip = false;
    },
    // 上传图片成功事件
    handleImgSuccess(response, file, fileList) {
      this.formData.coverUrl = response.data.netPath;
      this.$refs.releaseNewsForm.clearValidate("coverUrl");
    },
    // 上传图片错误事件
    handleImgError(err, file, fileList) {
      this.formData.coverUrl = "";
      this.isShowUploadTip = true;
      this.$message.error("图片上传失败");
    },
    // 上传图片预览事件
    handlePictureCardPreview(file) {
      this.uploadImgDialogImageUrl = file.url;
      this.uploadImgDialogVisible = true;
    },
    // 上传图片移除事件
    handleUploadImgRemove() {
      this.formData.coverUrl = "";
      this.isShowUploadTip = true;
    },
    // 创建富文本编辑器
    createWebRichTextEditor() {
      this.editor = new E("#richTextEditorBox");
      // 上传图片
      this.editor.config.uploadImgServer =
        process.env.VUE_APP_BASE_API + "/sys/fileManager/wangEditorUpload";
      this.editor.config.uploadImgHeaders = {
        Authorization: getToken(),
      };
      this.editor.config.uploadFileName = "file";
      // 上传视频
      this.editor.config.uploadVideoServer =
        process.env.VUE_APP_BASE_API + "/sys/fileManager/wangEditorUpload";

      this.editor.config.uploadVideoHeaders = {
        Authorization: getToken(),
      };
      this.editor.config.uploadVideoName = "file";
      this.editor.config.uploadVideoAccept = ["mp4", "wmv"];
      // 设置编辑器高度
      this.editor.config.height = 384;

      this.editor.config.placeholder = "必填，请输入公告内容";
      this.editor.config.zIndex = 200;
      // 取消自动 focus
      this.editor.config.focus = false;
      // 富文本编辑器失去焦点事件
      this.editor.config.onblur = (newHtml) => {
        if (newHtml) {
          this.$refs.releaseNewsForm.clearValidate("content");
        } else {
          this.formData.content = newHtml;
          this.$refs.releaseNewsForm.validateField("content");
        }
      };
      this.editor.create();
    },
    // 取消修改新闻按钮点击事件
    cancelBtnClick() {
      this.$router.push("/news");
    },
    // 保存新闻修改按钮点击事件
    saveNewsAlterBtnClick(formName) {
      this.formData.content = this.editor.txt.html();
      // this.formData.communityIds = this.formData.communityIds.map(
      //   (item) => item.communityId
      // );
      console.log(this.formData);
      this.$refs[formName].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          this.isLoading = true;
          if (
            Object.prototype.toString.call(this.formData.communityIds[0]) ===
            "[object Object]"
          ) {
            this.formData.communityIds = this.formData.communityIds.map(
              (item) => item.communityId
            );
          }

          const data = await alterNews(this.formData);
          console.log(data);
          if (data.code === 0 && data.data) {
            this.$message({
              message: "修改新闻成功",
              type: "success",
            });
            this.$router.push("/news");
          } else {
            this.$message.error("修改新闻失败");
          }
          this.isLoading = false;
        }
      });
    },
    // 新闻类型对话框相关事件 start------------------------
    // 添加新闻类型按钮点击事件
    addNewsTypeBtnClick() {
      this.isShowNewsTypeDialog = true;
    },
    // 添加新闻类型到表单确认按钮
    selectNewsTypeBtnClick() {
      this.formData.categoryIds = this.tempNewsTypeIdArray;
      this.newsTypeLabelData = this.tempNewsTypeLabelData;
      this.isShowNewsTypeDialog = false;
      if (this.formData.categoryIds.length > 0) {
        this.$refs.releaseNewsForm.clearValidate("categoryIds");
      }
    },
    // 新增新闻类型确认按钮
    addNewsTypeConfirmBtnClick(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.addNewsTypeBtnStatus = true;
          const data = await createNewsType({
            label: this.innerDialogForm.newsType,
          });
          await this.$store.dispatch("news/getAllNewsType");
          if (data.code === 0) {
            this.$message({
              message: "添加新闻类型成功",
              type: "success",
            });
            this.newsTypeDialogInnerVisible = false;
          }
          this.addNewsTypeBtnStatus = false;
        }
      });
    },
    // 新闻类型cs-tag点击事件
    newsTypeDialogCsTagClick(id, label) {
      console.log({ id, label });
      // 如临时新闻类型数组存在点击过的新闻类型id，则删除重复id
      if (this.tempNewsTypeIdArray.indexOf(id) !== -1) {
        const idPosition = this.tempNewsTypeIdArray.indexOf(id);
        this.tempNewsTypeIdArray.splice(idPosition, 1);
        this.tempNewsTypeLabelData.splice(idPosition, 1);
      } else {
        this.tempNewsTypeIdArray.push(id);
        this.tempNewsTypeLabelData.push({
          id,
          label,
        });
      }
    },
    // 关闭新闻类型对话框标签事件
    closeNewsTypeDialogTagEvent(id) {
      this.$confirm("此操作将永久删除该类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        beforeClose: async (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            const data = await deleteNewsType({ newCategoryIds: id });
            if (data.code === 0) {
              await this.$store.dispatch("news/getAllNewsType");
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }
          } else {
            done();
          }
        },
      })
        .then(async () => {
          this.$message({
            type: "success",
            message: "删除新闻类型成功!",
          });
        })
        .catch(() => {});
    },
    // 关闭新闻类型表单标签事件
    closeNewsTypeFormTagEvent(id) {
      this.newsTypeLabelData.forEach((item, index) => {
        if (item.id === id) {
          this.formData.categoryIds.splice(index, 1);
          this.newsTypeLabelData.splice(index, 1);
        }
      });
    },
    // 新闻类型对话框打开事件
    newsTypeDialogOpen() {
      // 对数据进行浅拷贝
      this.tempNewsTypeIdArray = JSON.parse(
        JSON.stringify(this.formData.categoryIds)
      );
      // let newsIdArr = [];
      // const tempArr = JSON.parse(JSON.stringify(this.formData.categoryIds));
      // tempArr.forEach((item) => {
      //   newsIdArr.push(item.id);
      // });
      // this.tempNewsTypeIdArray = newsIdArr;
      this.tempNewsTypeLabelData = JSON.parse(
        JSON.stringify(this.newsTypeLabelData)
      );
    },
    // 新闻类型内部对话框关闭事件
    newsTypeInnerDialogClose() {
      this.$refs.innerDialog.resetFields();
    },
    // 新闻类型对话框关闭事件
    newsTypeDialogClose() {
      this.isShowNewsTypeDialog = false;
    },
    // 新闻类型对话框相关事件 end------------------------

    // 关闭表单投放小区标签
    closeResidentialFormTagEvent(id) {
      // console.log(id);
      this.residentialAreaLabelData.forEach((item, index) => {
        if (item.id === id) {
          this.formData.communityIds.splice(index, 1);
          this.residentialAreaLabelData.splice(index, 1);
        }
      });
    },
    // 投放小区对话框相关事件 start------------------------
    // 获取小区列表
    async getResidentialData() {
      await this.$store.dispatch("residentialArea/getResidentialAreaList", {
        offset: this.offset,
        limit: this.limit,
      });
      console.log(this.residentialAreaList);
      this.residentialAreaList.list.forEach((item) => {
        this.residentialAreaData.push({
          key: item.communityId,
          label: item.name,
          disabled: false,
        });
      });
    },
    // 投放小区对话框打开事件
    residentialAreaDialogOpen() {
      // console.log(this.formData.communityIds);
      // console.log(this.residentialAreaLabelData);
      // // 对数据进行浅拷贝
      // this.tempResidentialAreaIdArray = JSON.parse(
      //   JSON.stringify(this.formData.communityIds)
      // );
      // this.tempResidentialAreaLabelData = JSON.parse(
      //   JSON.stringify(this.residentialAreaLabelData)
      // );

      // this.tempResidentialAreaData = this.residentialAreaLabelData.map(
      //   (item) => item.id
      // );
      // console.log(this.tempResidentialAreaData);

      this.$nextTick(() => {
        document.querySelectorAll(".el-transfer-panel")[1].style.display =
          "none";

        if (!this.$refs.transfer) return;
        this.$refs.transfer.$refs.leftPanel.checked =
          this.residentialAreaLabelData.map((item) => item.id);
      });
    },
    // 投放小区对话框关闭事件
    residentialAreaDialogClose() {
      this.$refs.transfer.$refs.leftPanel.checked = [];
      this.isShowResidentialAreaDialog = false;
    },
    // // 关闭投放小区对话框标签事件
    // closeResidentialAreaDialogTagEvent(id) {
    //   console.log("关闭投放小区对话框-----", id);
    // },
    // // 投放小区对话框标签点击事件
    // residentialAreaDialogCsTagClick(id, label) {
    //   // 如临时投放小区数组存在点击过的投放小区id，则删除重复id
    //   if (this.tempResidentialAreaIdArray.indexOf(id) !== -1) {
    //     const idPosition = this.tempResidentialAreaIdArray.indexOf(id);
    //     this.tempResidentialAreaIdArray.splice(idPosition, 1);
    //     this.tempResidentialAreaLabelData.splice(idPosition, 1);
    //   } else {
    //     this.tempResidentialAreaIdArray.push(id);
    //     this.tempResidentialAreaLabelData.push({
    //       id,
    //       label,
    //     });
    //   }
    // },
    // // 添加投放小区对话框显示
    // addResidentialAreaDialogVisible() {
    //   console.log("显示添加投放小区对话框");
    // },
    // 选择投放小区到表单按钮点击事件
    selectResidentialAreaBtnClick() {
      // this.formData.communityIds = this.tempResidentialAreaIdArray;
      // this.residentialAreaLabelData = this.tempResidentialAreaLabelData;
      // this.isShowResidentialAreaDialog = false;
      // if (this.formData.communityIds.length > 0) {
      //   this.$refs.releaseNewsForm.clearValidate("communityIds");
      // }
      this.residentialAreaLabelData = [];
      console.log(this.tempResidentialAreaData);
      this.formData.communityIds = this.tempResidentialAreaData;
      this.residentialAreaData.forEach((item) => {
        if (this.tempResidentialAreaData.indexOf(item.key) !== -1) {
          this.residentialAreaLabelData.push({
            id: item.key,
            label: item.label,
          });
        }
      });
      this.isShowResidentialAreaDialog = false;
    },
    // firstPageClick() {
    //   this.offset = 1;
    //   this.getResidentialData();
    // },
    // previousPageClick() {
    //   this.offset = this.residentialAreaList.currPage - 1;
    //   this.getResidentialData();
    // },
    // nextPageClick() {
    //   this.offset = this.residentialAreaList.currPage + 1;
    //   this.getResidentialData();
    // },
    // lastPageClick() {
    //   this.offset = this.residentialAreaList.totalPage;
    //   this.getResidentialData();
    // },
    // // 输入页数跳转
    // junkToOtherPage(pageNum) {
    //   this.offset = pageNum;
    //   this.getResidentialData();
    // },
    // 加载更多小区数据
    loadMoreResidentialArea: throttle(async function () {
      this.loadMoreBtnStatus = true;
      if (this.offset === this.residentialAreaList.totalPage) {
        this.$message({
          message: "没有更多了",
          type: "warning",
        });
        this.loadMoreBtnStatus = false;
        return;
      }
      this.offset += 1;
      await this.getResidentialData();
      if (this.formData.selectAllCommunity) {
        this.formData.selectAllCommunity = false;
        this.isSelectAllCommunity = false;
        this.residentialAreaData = this.residentialAreaData.map((item) => {
          return { key: item.key, label: item.label, disabled: false };
        });
        this.selectAllResidentialArea();
      }
      this.$refs.transfer.$refs.leftPanel.checked =
        this.residentialAreaLabelData.map((item) => item.id);
      this.loadMoreBtnStatus = false;
    }, 500),
    // 选取全部小区
    selectAllResidentialArea() {
      this.formData.selectAllCommunity = !this.formData.selectAllCommunity;
      this.isSelectAllCommunity = !this.isSelectAllCommunity;
      this.residentialAreaData = this.residentialAreaData.map((item) => {
        return { key: item.key, label: item.label, disabled: !item.disabled };
      });
      if (this.isSelectAllCommunity)
        this.$refs.transfer.$refs.leftPanel.checked = [];
    },
    leftCheckChange(arr) {
      this.tempResidentialAreaData = arr;
    },
    // 投放小区对话框相关事件 end------------------------
  },
};
</script>

<style lang="scss" scoped>
.cs-card {
  margin: 26px;
}

.form_G {
  .positionFormItem {
    margin-bottom: 10px;
  }

  .ejectRuleSelect {
    width: 100%;
  }

  .uploadImg {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }
}

.timeSlotRadioBox {
  width: 780px;

  .formRadio_G {
    margin-top: 16px;
  }
}

// 新闻类型、投放小区对话框样式 start
.newsTypeCsTag {
  margin-right: 29px;
  margin-bottom: 35px;
}

.confirmBtn {
  margin-top: 11px;
}

.el-transfer {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;

  ::v-deep .el-transfer-panel {
    width: 350px;
  }

  ::v-deep .el-transfer-panel__list {
    padding-bottom: 39px;
  }

  ::v-deep .el-transfer__buttons {
    display: none;
  }
}
// 新闻类型对话框样式 end
</style>
